<template>
  <div class="search-container">
    <form action="/">
        <van-search
          v-model="keywords"
          background="#3296fa"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @focus="isResustShow = false"
        />
    </form>
    <!--搜索结果-->
    <result v-if="isResustShow" :keywords="keywords"></result>
    <!--搜索建议-->
    <suggestion :keywords="keywords" v-else-if="keywords" @search="onSearch($event)"></suggestion>
    <!--搜索历史-->
    <historys v-else></historys>
  </div>
</template>

<script>
import suggestion from './components/suggestion.vue'
import result from './components/result.vue'
import historys from './components/historys.vue'
export default {
  // 定义属性
  data() {
    return {
      keywords:'',
      isResustShow:false
    }
  },
  components: {
    suggestion,
    result,
    historys
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    test() {
      console.log(111)
    },
    onSearch(val) {
      // 如果是点击搜索建议过来的，需要把要查询的信息回显到搜索框
      this.keywords = val
      // 开始进行搜索
      this.isResustShow = true
    },
    onCancel() {
      // 返回首页
      this.$router.back()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  .search-container{
    .van-search__action{
        color: #ffffff;
    }
  }
</style>